<form [formGroup]="form" (ngSubmit)="onGo()" novalidate >
  <div class="ngm-smart-filter-bar--content grid grid-cols-1 gap-2">
    @if (enabledToday()) {
      <ngm-today-filter class="ngm-smart-filter-bar_filter col"
        [granularity]="options.today?.granularity"
        [granularitySequence]="options.today?.granularitySequence"
        [defaultValue]="options.today?.defaultValue"
        [formControl]="today"
        [appearance]="styling?.appearance"
        [displayDensity]="styling?.appearance?.displayDensity"
      />
    }

    @for (control of controls$ | async; track control.name) {
      <div class="ngm-smart-filter-bar_filter col"
        [ngClass]="{actived: control.name === selectedField()}"
        (click)="onSelectField({name: control.name, event: $event, type: control.controlType})">
        
        @switch (control.controlType) {
          @case (FilterControlType.Datepicker) {
            <ngm-member-datepicker class="w-full h-full"
              [label]="control.options.label"
              [placeholder]="control.options.placeholder"
              [appearance]="styling?.appearance?.appearance"
              [displayDensity]="styling?.appearance?.displayDensity"
              [dataSettings]="control.dataSettings"
              [dimension]="control.dimension"
              [required]="control.required"
              [defaultValue]="control.options.defaultValue"
              [formControlName]="control.name"
              [ngStyle]="control.styling"
              [selectionType]="control.options?.selectionType"
              [displayDensity]="styling?.appearance?.displayDensity"
              [granularity]="control.options?.granularity"
            >
            </ngm-member-datepicker>
          }
          @case (FilterControlType.DropDownList) {
            <ngm-smart-select class="w-full h-full"
              [formControlName]="control.name"
              [dataSettings]="control.dataSettings"
              [dimension]="control.dimension"
              [options]="control.options"
              [appearance]="styling?.appearance"
              [ngStyle]="control.styling"
              (loadingChanging)="onLoadingChanging($event, control.name)"
              >
            </ngm-smart-select>
          }
          @case (FilterControlType.TreeSelect) {
            <ngm-member-tree-select class="w-full h-full"
              [formControlName]="control.name"
              [dataSettings]="control.dataSettings"
              [dimension]="control.dimension"
              [required]="control.required"
              [appearance]="styling?.appearance"
              [options]="control.options"
              [ngStyle]="control.styling"
              (loadingChanging)="onLoadingChanging($event, control.name)"
            >
            </ngm-member-tree-select>
          }
          @case (FilterControlType.Variable) {
            <ngm-variable class="w-full justify-self-start"
              [formControlName]="control.name"
              [label]="control.label"
              [dataSettings]="control.dataSettings"
              [variable]="control.property"
            />
          }
          @default {
            <ngm-smart-filter class="w-full h-full"
              [formControlName]="control.name"
              [dataSettings]="control.dataSettings"
              [dimension]="control.dimension"
              [options]="control.options"
              [appearance]="styling?.appearance"
              [required]="control.required"
              [ngStyle]="control.styling"
              (loadingChanging)="onLoadingChanging($event, control.name)"
            ></ngm-smart-filter>
          }
        }
      </div>
    }

    <ng-content select=".ngm-custom-filter"></ng-content>

    <div class="ngm-smart-filter-bar_go flex flex-wrap justify-end items-end gap-2 mx-2">
      @if (syntax() === Syntax.SQL) {
        <button type="button" mat-stroked-button color="accent" ngmAppearance="dashed"
          class="focus:outline outline-offset-2"
          [displayDensity]="styling?.appearance?.displayDensity"
          (click)="openCombinationSlicer()"
        >
          {{ 'Story.Widgets.FilterBar.CombinationSlicer' | translate: {Default: 'Combination Slicer'} }}
        </button>
      }

      <button type="submit" mat-raised-button color="primary"
        [displayDensity]="styling?.appearance?.displayDensity"
        [disabled]="!form.valid || loading"
      >
        {{ 'Story.Widgets.FilterBar.Query' | translate: {Default: 'Query'} }}
      </button>

      @if (editableSignal()) {
        <button type="button" mat-stroked-button color="accent" ngmAppearance="dashed"
          class="focus:outline outline-offset-2"
          [displayDensity]="styling?.appearance?.displayDensity"
          (click)="saveAsDefaultMembers()"
        >
          {{ 'Story.Widgets.FilterBar.SaveAsDefaultMembers' | translate: {Default: 'Save as default members'} }}
        </button>
      }
    </div>
  </div>
</form>

@if (editableSignal() && (placeholder$ | async)) {
  <div class="ngm-story-widget__placeholder absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
    @if (selectionFieldsAnnotation()) {
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" width="100%" height="100%">
        <rect x="0" y="25" rx="5" ry="5" width="200" height="50" style="fill:#e0e0e050"/>
        <rect x="210" y="25" rx="5" ry="5" width="200" height="50" style="fill:#e0e0e050"/>
        <rect x="420" y="25" rx="5" ry="5" width="200" height="50" style="fill:#e0e0e050"/>
        <rect x="630" y="25" rx="5" ry="5" width="200" height="50" style="fill:#e0e0e050"/>
        <rect x="840" y="25" rx="5" ry="5" width="200" height="50" style="fill:#e0e0e050"/>
      </svg>
    } @else {
      <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="#80808050"/>
        <rect x="25" y="48" width="50" height="4" fill="white"/>
        <rect x="48" y="25" width="4" height="50" fill="white"/>
      </svg>
      <span class="ngm-story-widget__placeholder-title">{{ 'Story.Widgets.FilterBar.Title' | translate: {Default: 'Filter Bar'} }}</span>
    }
  </div>
}
